<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100%;
            height: 400px;
            background-color: bisque;
            display: flex;
            justify-content: space-around;
            /*设置纵轴*/
            /*column 纵轴   row 横轴*/
            flex-direction: row;
            /*设置子元素自动换行，不设置的话，会自动缩小子元素的大小去塞进去*/
            flex-wrap: wrap;
        }
        span {
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 10px;
        }
    </style>
</head>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>5</span>
    <span>5</span>
</div>
</body>
</html>